<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <title>喀什理工职业技术学院</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="renderer" content="webkit">

  <!-- bootstrap -->
  <link rel="stylesheet" href="/wcm.files/common/bootstrap-4.6.2-dist/css/bootstrap.min.css">

  <!-- swiper -->
  <link rel="stylesheet" href="/wcm.files/common/swiper/swiper.min.css">
  <!-- hover -->
  <link rel="stylesheet" href="/wcm.files/common/css/hover.css">

  <link rel="stylesheet" href="/static/css/index.css">

  <script src="/wcm.files/js/jqueryN.js"></script>


  <script src="/wcm.files/common/swiper/swiper.min.js"></script>
  <script src="/wcm.files/common/js/jquery.SuperSlide.2.1.3.js"></script>
  <script src="/wcm.files/common/bootstrap-4.6.2-dist/js/bootstrap.bundle.min.js"></script>

  <script src="/static/js/index.js"></script>
  <script src="/wcm.files/common/js/vue.min.js"></script>
  <link rel="stylesheet" href="/wcm.files/font/bootstrap-icons.min.css">

</head>

<body id="lby">
  <div id="header"></div>
  <div id="body">
    <div class="g-bd  clearfix">
      <!-- <div class="banner"><img width="100%" src="/static/images/banner.png"></div> -->
      <div class="h30"></div>
      <div class="container">
        <div class="row">
          <div class="g-sd  col-md-3">
            <div class="main-column">
              <span>学院动态</span>
              <!-- <span id="main-column-button" class="glyphicon glyphicon-chevron-down hidden-lg" aria-hidden="true"></span> -->
            </div>
            <div id="column-nav" class="column-nav">
              <!-- <ul class="column-list">
                <li><a href="/info/iList.jsp?cat_id=10982">教研活动<span class="iconfont iconup-copy"></span></a>
                </li>
                <li><a href="/info/iList.jsp?cat_id=10983">课题研究<span class="iconfont iconup-copy"></span></a>
                </li>
                <li><a href="/info/iList.jsp?cat_id=10984">课改项目<span class="iconfont iconup-copy"></span></a>
                </li>
                <li><a href="/info/iList.jsp?cat_id=10985">案例论文<span class="iconfont iconup-copy"></span></a>
                </li>
              </ul> -->
            </div>
          </div>
          <div class="g-mn  col-md-9">
            <div class="address">
              <div class="address-1 pull-left">
                学院动态
              </div>
              <div class="address-2 pull-right">
                <a href="/">首页</a><span> &gt;</span>
                <span>学院动态</span>
              </div>
            </div>
            <div class="list-1">
              <a class="item" v-for="(item, index) in limitedGzdt" :key="index" :key="item.href" href="nry.html">
                <div class="item-time">{{ item.date }}</div>
                <p class="item-tit text-overflow" target="_blank" :title="item.title">
                  {{ item.title }}
                </p>
              </a>
            </div>
            <div class="fy">
              <span>共有31条</span>
              <span>当前第1/3页</span>
              <br class="sj">
              <span><a href="?cat_id=10981&amp;cur_page=1">首页</a></span>
              <span><a href="?cat_id=10981&amp;cur_page=1">&lt;&lt;上一页</a></span>
              <span><a href="?cat_id=10981&amp;cur_page=2">下一页&gt;&gt;</a></span>
              <span><a href="?cat_id=10981&amp;cur_page=3">末页</a></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="footer"></div>
</body>

</html>

<script>
  $("#footer").load("./footer.html");
  $("#header").load("./header.html");
  new Vue({
    el: '#body',
    data: {
      categories: {
        tpxw: [], // 图片新闻数据
        gzdt: [], // 学院动态数据
        tzgg: [], // 通知公告数据
        kjcx: []  // 科技创新数据
      }
    },
    mounted () {
      this.fetchData();
    },
    methods: {
      fetchData () {
        $.ajax({
          url: './data.json', // 确保路径正确
          method: 'GET',
          dataType: 'json',
          success: (data) => {
            console.log('成功获取数据:', data);
            this.categories.tpxw = data.tpxw || [];
            this.categories.gzdt = data.gzdt || [];
            this.categories.tzgg = data.tzgg || [];
            this.categories.kjcx = data.kjcx || [];
            this.$nextTick(() => {
              this.initSwiper(); // 数据加载完成后初始化 Swiper
            });
          },
          error: (xhr, status, error) => {
            console.error('获取数据失败:', error);
          }
        });
      },
      initSwiper () {
        new Swiper('#lb_02', {
          autoplay: {
            delay: 5000, // 5秒切换一次
          },
          loop: true, // 循环模式选项
          pagination: {
            el: '#lb_02 .swiper-pagination',
            clickable: true,
          },
          navigation: {
            nextEl: '#lb_02 .swiper-button-next',
            prevEl: '#lb_02 .swiper-button-prev',
          },
        });
      }
    },
    computed: {
      limitedTpxw () {
        // 返回前 5 条图片新闻数据
        return this.categories.tpxw.slice(0, 5);
      },
      limitedGzdt () {
        return this.categories.gzdt.slice(0, 99);
      },
      limitedTzgg () {
        return this.categories.tzgg.slice(0, 6);
      },
      limitedKjcx () {
        return this.categories.kjcx.slice(0, 3);
      }
    }
  });
</script>